Hexo + GitHub Pages搭建博客

博客终于折腾出了一个乞丐版~~~,在此记录下搭建的过程和遇到的一些坑,希望能让后来者少走些弯路.更快搭建起自己的博客。

背景

博客采用的是GitHub Pages + Hexo搭建。

关于GitHub Pages

GitHub Pages是一个免费的静态站点,每个站点有300M的免费空间,可以绑定自己的域名。将Hexo生成的的页面发布到GitHub Pages,由其托管,这样我们无需自己搭建服务器,十分简单,适合搭建个人博客。

关于Hexo

hexo是由Node.js驱动的一款快速、简单且功能强大的博客框架。没用过其他博客框架(像jekyll),体会不深,感觉是很多人在用,并且也有很多贡献的主题可选。

环境准备

  1. 安装git软件
  2. 安装node.js
  3. 安装文本编辑软件

GitHub + GitHub Pages + git软件

如果没有GibHUb帐号先去注册一个。然后创建GitHub Pages,比较简单,注意的是名称是username.github.io。username是你的GitHub帐号,创建成功后就可以通过username.github.io这个域名访问你的Github Pages页面了,是不是有点激动了~具体教程请移步。GitHub Pages还可以绑定自己的域名。
git软件我是用的GitHub的官方软件GitHub for Windows,会同时安装一个git Shell,长这个样子:
git shell
当然可以安装其他的git软件,但是用GithHub的好处是不必添加SSH Key到GitHUb(是不是看到很多教程有这个步骤~)

Hexo

安装Hexo之前要安装Node.js,到官网下一个安装就好。

安装Hexo

打开shell,执行:

1
npm install -g hexo

部署Hexo

执行init命令初始化Hexo到指定的目录:

1
hexo init <folder>

也可以切换到某一个具体目录直接执行init命令。

本地启动Hexo服务

shell中cd到刚init的目录,执行生成静态页面的命令:

1
hexo generate

将会生成静态页面至hexo\public\目录。然后启动本地服务:

1
hexo server

将会启动本地服务,在浏览器中输入http://localhost:4000就可以看到生成的页面了。至此Hexo就安装好了,还是很简单吧。

Hexo的配置

Hexo的配置用到两个文件,一个是对整站的配置hexo_config.yml,另一个是对主题的配置hexo\themes\light_config.yml
这里主要介绍下站点配置文件中对GitHub仓库的配置:
config
需将repository字段配置为你的远程仓库地址,特别注意的是在冒号后需要有空格,初学者的坑,不然怎么都发布成功。配置后就可以执行:

1
hexo deploy

发布Hexo,将你的页面发布到远程GItHub仓库。

Hexo常用命令

hexo new “postName” #新建文章
hexo new page “pageName” #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,’ctrl + c’关闭server)
hexo deploy #将.deploy目录部署到GitHub

Hexo主题安装

安装好Hexo我们使用的是Hexo的默认主题,当然我们可以选择安装自己喜欢的主题。具体的安装步骤就不详述了,可移步其他的教程,都非常详细。我使用的主题是hexo-theme-next,比较简洁大方,并且教程也非常详细。知乎上面也有很多的推荐有哪些好看的 Hexo 主题?,可以根据的自己的喜好选择。

博客其他组件

目前我的博客只添加了评论和图床。评论使用的多说,图床使用的七牛。其他的东西再慢慢折腾~

第一篇博客

博客都搭建好了,写篇文章吧!
在Hexo目录下执行:

1
hexo new "first"

将会在hexo/source/source/_posts目录下生成first.md,用任意的文本编辑器(推荐Sublime Text 3)编辑即可。markdown的语法可参考这里.

参考文献

http://ibruce.info/2013/11/22/hexo-your-blog/
http://zipperary.com/2013/05/29/hexo-guide-3/
http://cnfeat.com/blog/2014/05/10/how-to-build-a-blog/
http://rhwayfun.com/post/first-blog/#more
https://yangjian.me/workspace/building-blog-with-hexo/